<template>
  <div class="table-page-search-box">
    <a-form layout="inline">
      <a-row :gutter="24">
        <a-col :md="8" :sm="24">
          <a-form-item label="订单编号">
            <a-input v-model="queryParam.order_no" allowClear placeholder="请输入订单号"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="商品名称">
            <a-input v-model="queryParam.goods_name" allowClear placeholder="请输入商品名称"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="手机号">
            <a-input v-model="queryParam.mobile" allowClear placeholder="请输入手机号"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="8" :sm="24">
          <a-form-item label="下单时间">
            <a-range-picker
              format="YYYY-MM-DD HH:mm"
              valueFormat="YYYY-MM-DD HH:mm"
              :placeholder="['开始时间', '结束时间']"
              v-model="queryTime"
              @change="changeTime"
            />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="门店名称">
            <a-input v-model="queryParam.md_name" allowClear placeholder="请输入门店名称"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="订单类型">
            <a-select v-model="queryParam.order_type">
              <a-select-option value="-1">全部</a-select-option>
              <a-select-option value="0">普通订单</a-select-option>
              <a-select-option value="1">酒店预约</a-select-option>
              <a-select-option value="2">服务预约</a-select-option>
              <a-select-option value="3">点餐订单</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="8" :sm="24">
          <a-form-item label="来源平台">
            <a-select v-model="queryParam.platform">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">微信小程序</a-select-option>
              <a-select-option value="2">微信公众号</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="会员昵称">
            <a-input v-model="queryParam.user_name" allowClear placeholder="请输入会员昵称"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="salesmanList.length">
          <a-form-item label="业务员">
            <a-select v-model="queryParam.salesman_id" allowClear>
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.id" v-for="item of salesmanList" :key="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="供货商">
            <a-select v-model="queryParam.supplier_id" allowClear>
              <a-select-option :key="0">全部</a-select-option>
              <a-select-option :key="item.id" v-for="(item, index) in supplier_list">
                {{ item.supplier_name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="收货人">
            <a-input v-model="queryParam.name" allowClear placeholder="收货人"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="营销类型">
            <a-select v-model="queryParam.activity_type" placeholder="请选择">
              <a-select-option value="-1">全部</a-select-option>
              <a-select-option value="1">砍价</a-select-option>
              <a-select-option value="2">拼团</a-select-option>
              <a-select-option value="3">秒杀</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="地区选择">
            <city-select v-model="queryParam.area" data-type="area" value-type="1"> </city-select>
          </a-form-item>
        </a-col>

        <a-col :md="8" :sm="24">
              <a-form-item label="联系人姓名">
                <a-input-search allowClear v-model="queryParam.nickname" placeholder="姓名" />
              </a-form-item>
            </a-col>
            
            <a-col :md="8" :sm="24">
              <a-form-item label="新办理新号码">
                <a-input-search allowClear v-model="queryParam.phone" placeholder="手机号码" />
              </a-form-item>
            </a-col>
            
        <a-col :md="8" :sm="24">
          <a-form-item label="">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button :loading="exporting" @click="exportOL" type="primary" style="margin-left: 9px"
              >导出Excel</a-button
            >
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import storage from 'store'
import { salesmanList } from '@/api/store'
import { supplierList as list } from '@/api/purchase/purchase'
import CitySelect from '@/components/CitySelect/CitySelect'

export default {
  components: {
    CitySelect,
  },

  props: {
    exporting: false,
    is_cloud: false,
  },

  data() {
    return {
      queryParam: {
        // 订单号
        order_no: '',
        // 商品名称
        goods_name: '',
        // 手机号
        mobile: '',
        // 下单开始时间
        dateStart: '',
        // 下单结束时间
        dateEnd: '',
        // 门店名称
        md_name: '',
        // 订单类型
        order_type: '-1',
        // 来源平台
        platform: '',
        // 会员昵称
        user_name: '',
        name: '',
        salesman_id: '',
        supplier_id: 0,
        area: [],
        phone:'',
        nickname:'',

      },
      queryTime: [],
      salesmanList: [],
      supplier_list: [],
    }
  },

  methods: {
    async supplierList() {
      const res = await list({ limit: 50, page: 1 })
      if (res.code === 0) {
        this.supplier_list = res.data.list
      }
    },
    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.dateStart = e[0]
        this.queryParam.dateEnd = e[1]
      } else {
        this.queryParam.dateStart = ''
        this.queryParam.dateEnd = ''
      }
    },
    // 点击重置参数
    reset() {
      this.queryParam.order_no = ''
      this.queryParam.goods_name = ''
      this.queryParam.mobile = ''
      this.queryParam.dateStart = ''
      this.queryParam.dateEnd = ''
      this.queryParam.md_name = ''
      this.queryParam.order_type = ''
      this.queryParam.platform = ''
      this.queryParam.user_name = ''
      this.queryParam.name = ''
      this.queryParam.nickname = ''
      this.queryParam.phone = ''
      this.queryParam.area = []
      this.queryTime = []
    },
    // 点击查询
    search() {
      let queryParam = JSON.parse(JSON.stringify(this.queryParam))

      if (queryParam.area.length) {
        let [province_id, city_id, district_id] = queryParam.area
        queryParam.province_id = province_id
        queryParam.city_id = city_id
        queryParam.district_id = district_id
      }

      delete queryParam.area
      this.$emit('search', queryParam)
    },
    exportOL() {
      let queryParam = JSON.parse(JSON.stringify(this.queryParam))

      if (queryParam.area.length) {
        let [province_id, city_id, district_id] = queryParam.area
        queryParam.province_id = province_id
        queryParam.city_id = city_id
        queryParam.district_id = district_id
      }

      delete queryParam.area
      this.$emit('exportOL', queryParam)
    },

    selectAddr(e) {
      console.log('e,', e)
    },
  },

  created() {
    if (this.is_cloud) {
      this.supplierList()
    }
    let daili = storage.get('daili')
    if (daili) {
      salesmanList().then((res) => {
        this.salesmanList = res.data.list || []
      })
    }
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 12px;
  align-items: center;
  max-width: 1500px;
  .searchItem {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    margin-right: 20px;
    .label {
      white-space: nowrap;
      margin-right: 10px;
      width: 70px;
      text-align: left;
    }
  }
  .search-input {
    width: 320px;
  }
}

::v-deep {
  .ant-cascader-picker,
  .ant-cascader-input {
    height: 32px;
  }
}
</style>
